<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="明细"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 主内容 -->
    <view class="content">
      <!-- 交易标题 -->
      <view class="transaction-title">{{ transactionData.title }}</view>

      <!-- 交易金额 -->
      <view
        class="transaction-amount"
        :class="transactionData.type === 'income' ? 'income' : 'expense'"
      >
        {{ transactionData.type === "income" ? "+" : "-" }}¥
        {{ transactionData.amount }}
      </view>

      <!-- 备用金变动（如果有） -->
      <view v-if="transactionData.reserveFund" class="reserve-fund">
        退款备用金：{{ transactionData.reserveFund >= 0 ? "+" : "-" }}¥
        {{ Math.abs(transactionData.reserveFund).toFixed(2) }}
      </view>

      <!-- 交易详情 -->
      <view class="detail-card">
        <view class="detail-item">
          <text class="detail-label">类型</text>
          <text class="detail-value">{{
            transactionData.type === "income" ? "收入" : "支出"
          }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">时间</text>
          <text class="detail-value">{{ transactionData.time }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">余额</text>
          <text class="detail-value">{{ transactionData.balance }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">流水号</text>
          <view class="detail-value-row">
            <text class="detail-value">{{ transactionData.serialNumber }}</text>
            <text class="copy-btn" @click="copySerialNumber">复制</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 交易数据
const transactionData = ref({
  title: "提现",
  amount: "632.16",
  reserveFund: -0.0,
  type: "expense",
  time: "2025-10-17 23:01:45",
  balance: "0.00",
  serialNumber: "14073877",
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 复制流水号
const copySerialNumber = () => {
  uni.setClipboardData({
    data: transactionData.value.serialNumber,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
  });
};

onMounted(() => {
  // TODO: 从路由参数获取交易数据
  // const pages = getCurrentPages();
  // const currentPage = pages[pages.length - 1];
  // const options = currentPage.options;
  console.log("交易明细页面加载");
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 30rpx 40rpx 30rpx;
}

// 交易标题
.transaction-title {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
}

// 交易金额
.transaction-amount {
  font-size: 80rpx;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16rpx;

  &.income {
    color: #ff6600;
  }

  &.expense {
    color: #333;
  }
}

// 备用金变动
.reserve-fund {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin-bottom: 40rpx;
}

// 详情卡片
.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.detail-label {
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
}

.detail-value-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.copy-btn {
  font-size: 26rpx;
  color: #ff6600;

  &:active {
    opacity: 0.7;
  }
}
</style>
